import React from 'react';
import { Modal, Form, Spin, Input, Select, DatePicker, TreeSelect } from 'antd';

const { Option } = Select;

@Form.create()
class AddModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateTime: '',
    };
  }

  componentDidMount(){
    
  }

  handleOk = e => {
    const { onOk, form } = this.props;
    const { validateFields, getFieldsValue } = form;
    let _this = this;
    validateFields(errors => {
      if (errors) {
        return;
      }
      const data = { ...getFieldsValue() };
      data.dictValueId = _this.props.dictDetail&&_this.props.dictDetail.dictValueId?_this.props.dictDetail.dictValueId:'';
      onOk(data);
    });
  };

  handleCancel = e => {
    const { onCancel } = this.props;
    onCancel();
  };

  render() {
    const { form, loading, dictDetail, ...addModalProps } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    // console.log(dictDetail,'dictDetail')
    return (
      <Modal {...addModalProps} onOk={this.handleOk} onCancel={this.handleCancel}>
        <Spin spinning={loading}>
          <Form style={{ paddingRight: '20px' }} name="name" {...formItemLayout}>
            <Form.Item label="字典值编码" name="code">
              {getFieldDecorator('code', {
                initialValue: dictDetail && dictDetail.code ? dictDetail.code : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入字典编码',
                  },
                ],
              })(<Input placeholder="请输入字典编码" />)}
            </Form.Item>
            <Form.Item label="字典值名称" name="name">
              {getFieldDecorator('name', {
                initialValue: dictDetail && dictDetail.name ? dictDetail.name : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入字典值名称',
                  },
                ],
              })(<Input placeholder="请输入字典值名称" />)}
            </Form.Item>
            <Form.Item label="排序" name="dispOrder">
              {getFieldDecorator('dispOrder', {
                initialValue: dictDetail && dictDetail.dispOrder ? dictDetail.dispOrder : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入排序',
                  },
                ],
              })(<Input placeholder="请输入排序" />)}
            </Form.Item>
            <Form.Item label="描述" name="remark">
              {getFieldDecorator('remark', {
                initialValue: dictDetail && dictDetail.remark ? dictDetail.remark : '',
                // initialValue: '',
                rules: [
                  {
                    required: false,
                    message: '请输入描述',
                  },
                ],
              })(<Input.TextArea placeholder="请输入描述" />)}
            </Form.Item>
          </Form>
        </Spin>
      </Modal>
    );
  }
}

export default AddModal;
